<template>
  <div class="ct-nav">
      <h2>热门推荐</h2>
      <ul class="ul1">
          <li v-for="(item , index) in arr" v-bind:key="index">
              <a href="">{{item}}</a>
              <span>|</span>
          </li>
      </ul>

  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:['华语' , '排行' , '摇滚' , '民谣' , '电子']
        }
    }
}
</script>

<style>
    .ct-nav{
        display:flex;
        align-items:center;
        height:40px;
    }
    .ct-nav .ul1{
        display: flex;
    }
    .ct-nav h2{
        margin-right:20px;
    }
    .ct-nav .ul1 li{
    }
    .ct-nav .ul1 li a{
        text-decoration: none;
        color:#000;
    }
    .ct-nav span{
        margin:0 20px;
        display: inline-block;
        opacity: 0.8;
    }

</style>